<template>
  <div class="DateSearchList">
    <div
      v-for="item in list"
      :key="item.id"
      :class="selectId === item.id ? 'selectStyle' : 'defalutStyle'"
      @click="CilckDateSearchItem(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [
        { id: 0, name: '日', disabled: true },
        { id: 1, name: '月', disabled: true },
        { id: 2, name: '年' }
      ],
      selectId: 2
    }
  },
  created() {},
  methods: {
    CilckDateSearchItem(item) {
      if (item.id === this.selectId) return
      if (item.disabled) {
        this.$toast('功能建设中')
      } else {
        this.selectId = item.id
        this.$emit('switchPeriod', item.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.DateSearchList {
  display: flex;
  justify-content: space-around;
  // width: 140px;
  height: 30px;
  font-size: 14px;
  background-color: $main-blue;
  border-radius: 8px;
  padding: 2px;
  color: #656c9d;
  div {
    line-height: 26px;
    border-radius: 8px;
    width: 40px;
    height: 26px;
    text-align: center;
    &.selectStyle {
      background-color: $main-light-blue;
      color: #fff;
    }
  }
}
</style>
